<template>
  <div class="box6">
    <p class="title">热门景区排行</p>
    <p class="bg"></p>
    <div class="echarts" ref="echart"></div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import * as echarts from 'echarts'
//获取图形图表的DOM节点
let echart = ref()
onMounted(() => {
  //初始化Echarts实例
  let myEcharts = echarts.init(echart.value)
  let imStr =
    ''
  let option: any = {
    //图表背景色
    backgroundColor: {
      type: 'linear',
      x: 0,
      y: 0,
      x2: 0,
      y2: 1,
      colorStops: [
        {
          offset: 0,
          //   color: 'rgb(243, 250, 255)', // 0% 处的颜色
          color: 'rgb(7,49, 117)', // 0% 处的颜色
        },
        {
          offset: 1,
          //   color: 'rgb(253, 254, 255)', // 100% 处的颜色
          color: 'rgb(16, 44,85)', // 100% 处的颜色
        },
      ],
      global: false, // 缺省为 false
    },
    //鼠标悬浮时候的提示框
    tooltip: {
      show: true,
      trigger: 'item',
      padding: [8, 15],
      backgroundColor: 'rgba(12, 51, 115,0.8)',
      borderColor: 'rgba(3, 11, 44, 0.5)',
      textStyle: {
        color: 'rgba(255, 255, 255, 1)',
        fontFamily: 'SourceHanSansCN-Normal',
        fontSize: 22,
      },
    },
    legend: {
      show: false,
    },
    grid: {
      left: '15%',
      right: '5%',
      top: '6%',
      bottom: '0%',
    },
    xAxis: [
      {
        splitLine: {
          show: false,
        },
        type: 'value',
        show: false,
        axisLine: {
          //x轴坐标轴，false为隐藏，true为显示
          show: false,
        },
      },
    ],
    yAxis: [
      {
        show: true,
        splitLine: {
          show: false,
        },
        axisLine: {
          show: false,
        },
        type: 'category',
        axisTick: {
          show: false,
        },
        inverse: true,
        data: [1, 2, 3, 4, 5, 6, 7, 8],
        axisLabel: {
          show: true,
          margin: 20,
          textStyle: {
            color: 'rgba(255, 255, 255, 1)',
            fontFamily: 'SourceHanSansCN-Normal',
            fontSize: 16,
          },
          formatter: function () {
            // var index = params
            // if (index - 1 < 3) {
            return ['{a1|}'].join('\n')
            // } else {
            //    return ['{b|' + index + '}'].join('\n');
            // }
          },
          rich: {
            a: {
              padding: [0, 0, 35, 10],
            },
            a1: {
              color: '#fff',
              backgroundColor: {
                image: imStr,
              },
              width: 30, //柱子前边图片 的宽和高
              height: 32, //柱子前边图片 的宽和高
              align: 'center',
              borderRadius: 2,
            },
            a2: {
              color: '#fff',
              backgroundColor: {
                image: imStr,
              },
              width: 30, //柱子前边图片 的宽和高
              height: 32, //柱子前边图片 的宽和高
              align: 'center',
              borderRadius: 2,
            },
            a3: {
              color: '#fff',
              backgroundColor: {
                image: imStr,
              },
              width: 30, //柱子前边图片 的宽和高
              height: 32, //柱子前边图片 的宽和高
              align: 'center',
              borderRadius: 2,
            },
            b: {
              backgroundColor: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                  {
                    offset: 0,
                    color: 'rgba(58, 113, 169, 1)', // 0% 处的颜色
                  },
                  {
                    offset: 1,
                    color: 'rgba(62, 126, 198, 1)', // 100% 处的颜色
                  },
                ],
                global: false, // 缺省为 false
              },
              color: 'rgba(203, 218, 255, 1)',
              width: 60,
              height: 60,
              padding: [5, 0, 0, 0],
              borderRadius: 30,
              fontSize: 36,
              align: 'center',
              fontWeight: 500,
            },
          },
        },
      },
      {
        type: 'category',
        inverse: true,
        axisTick: 'none',
        axisLine: 'none',
        show: true,
        position: 'right',
        axisLabel: {
          inside: true,
          verticalAlign: 'bottom',
          lineHeight: 25, //"亿元" 标注 离 柱子之间的距离 值越大 离柱子月远
          margin: 0, //刻度标签与轴线之间的距离
          show: true,
          textStyle: {
            // color: '#132852',
            color: '#fff',
            fontFamily: 'SourceHanSansCN-Normal',
            fontSize: 20,
          },
          formatter: function (value: number) {
            return value + '亿元'
          },
        },
        data: [100, 90, 80, 70, 60, 50, 40, 30], //相当于 y 轴显示的数据 的实际数值
      },
    ],
    series: [
      {
        name: '', //背景
        type: 'bar',
        barWidth: 10, //背景的柱子
        barGap: '-100%', //每个柱子之间的间隔 //-100% 完全重叠
        data: [100, 100, 100, 100, 100, 100, 100, 100], //背景柱子的长度
        itemStyle: {
          normal: {
            color: '#DFE6F3',
            barBorderRadius: 10, //圆角
          },
        },
      },
      //显示数的柱状图
      {
        show: true,
        name: '', //显示
        type: 'bar',
        data: [
          { name: 'xxx景区1', value: 100 },
          { name: 'xxx景区2', value: 90 },
          { name: 'xxx景区3', value: 80 },
          { name: 'xxx景区4', value: 70 },
          { name: 'xxx景区5', value: 60 },
          { name: 'xxx景区6', value: 50 },
          { name: 'xxx景区7', value: 40 },
          { name: 'xxx景区8', value: 30 },
        ],
        barWidth: 10, // 柱子宽度
        showBackground: false,
        backgroundStyle: {
          //背景色渐变
          color: {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 1,
            y2: 1,
            colorStops: [
              {
                offset: 0,
                color: '#DFE6F3',
              },
              {
                offset: 1,
                color: '#DFE6F3',
              },
            ],
          },
        },
        label: {
          show: true,
          offset: [5, -15], //"xxx景区1" 这种标注 距离 柱子之间的距离 负的值越大 ,离柱子越近
          //   color: '#132852',
          color: '#fff',
          fontFamily: 'SourceHanSansCN-Normal',
          fontSize: 16,
          fontWeight: 500,
          position: 'left',
          align: 'left',
          formatter: function (params: any) {
            return params.data.name
          },
        },
        //每一个柱子的渐变色
        itemStyle: {
          barBorderRadius: [10, 10, 10, 10],
          color: {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 1,
            y2: 1,
            colorStops: [
              {
                offset: 0,
                color: '#3B9FFC',
              },
              {
                offset: 1,
                color: '#417DF7',
              },
            ],
          },
        },
      },
      // {
      //    name: "外圆",
      //    type: "scatter",
      //    emphasis: {
      //       scale: false,
      //    },
      //    symbol: "rect",
      //    symbolSize: [5,26],// 进度条白点
      //    itemStyle: {
      //       show: true,
      //       barBorderRadius: [10, 10, 10, 10],
      //       color: '#FFF',
      //       shadowColor: "rgba(255, 255, 255, 0.5)",
      //       shadowBlur: 5,
      //       borderWidth: 1,
      //       opacity: 1,
      //    },
      //    z: 2,
      //    data: [{ name: '北京', value: 100 }, { name: '上海', value: 90 }, { name: '广州', value: 80 }, { name: '天津', value: 70 }, { name: '山东', value: 60 }],
      //    animationDelay: 500,
      // },
    ],
    dataZoom: [
      {
        yAxisIndex: [0, 1], // 这里是从X轴的0刻度开始
        show: false, // 是否显示滑动条，不影响使用
        type: 'slider', // 这个 dataZoom 组件是 slider 型 dataZoom 组件
        startValue: 0, // 从头开始。
        endValue: 4, // 展示到第几个。
      },
    ],
  }
  myEcharts.setOption(option)
  setInterval(() => {
    if (option.dataZoom[0].endValue >= 7) {
      option.dataZoom[0].endValue = 4
      option.dataZoom[0].startValue = 0
    } else {
      option.dataZoom[0].endValue = option.dataZoom[0].endValue + 1
      option.dataZoom[0].startValue = option.dataZoom[0].startValue + 1
    }
    myEcharts.setOption(option)
  }, 4000)
})
</script>

<style lang="scss" scoped>
.box6 {
  margin: 10px 0 0 0;
  width: 100%;
  height: 100%;
  background: url('../../images/dataScreen-main-cb.png') no-repeat;
  background-size: 100% 100%;
  .title {
    color: #fff;
    font-size: 20px;
    margin-left: 20px;
  }
  .bg {
    width: 68px;
    height: 7px;
    background: url('../../images/dataScreen-title.png') no-repeat;
    background-size: cover;
    margin: 10px 0 0 20px;
  }
  .echarts {
    margin-top: 29px;
    width: 100%;
    height: 220px;
    // background-color: red;
  }
}
</style>
